/*
 * @Last Modified by: M_xiaohan
 * @Last Modified time: 2018-05-16 13:48:42
 */
/**
 * @author M_xiaohan
 * @date 2018/4/25
 * @Description:
 */


import React from 'react';
import {
  TabBar,
} from 'antd-mobile';
import {
  connect,
} from 'dva';
import { routerRedux } from 'dva/router';

class TabBarPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: '',
      hidden: false,
      carListNum: null,
    };
  }

  componentDidMount() {
  }
  componentWillReceiveProps(nextProps) {
    this.setState({
      carListNum: nextProps.carListNum,
    });
  }

  tabPressed = (tab) => {
    this.setState({
      selectedTab: tab,
    });
    switch (tab) {
      case 'myOrder':
        this.props.dispatch(routerRedux.push('/myorders'));
        break;
      case 'shoppingCar':
        this.setState({ hidden: false });
        this.props.dispatch(routerRedux.push('/shoppingCar'));
        break;
      default:
        this.props.dispatch(routerRedux.push('/internaltradetype'));
        break;
    }
  }
  render() {
    const tabbarConfigData = [{
      title: '分类',
      key: 'classification',
      icon: <i className="fa fa-lg fa-bars" aria-hidden="true" />,
      selectedIcon: <i className="fa fa-lg fa-bars" aria-hidden="true" />,
      hasBadge: false,
    }, {
      title: '购物车',
      key: 'shoppingCar',
      icon: <i className="fa fa-lg fa-shopping-cart" aria-hidden="true" />,
      selectedIcon: <i className="fa fa-lg fa-shopping-cart" aria-hidden="true" />,
      hasBadge: this.state.carListNum ? this.state.carListNum : false,
    }, {
      title: '我的订单',
      key: 'myOrder',
      icon: <i className=" fa fa-lg fa-user-o" aria-hidden="true" />,
      selectedIcon: <i className=" fa fa-lg fa-user-o" aria-hidden="true" />,
      hasBadge: false,
    }];
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', bottom: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          {
          tabbarConfigData.map((tabbar) => {
                return (
                  <TabBar.Item
                    title={tabbar.title}
                    key={tabbar.key}
                    icon={tabbar.icon}
                    selectedIcon={tabbar.selectedIcon}
                    selected={this.state.selectedTab === tabbar.key}
                    onPress={() => this.tabPressed(tabbar.key)}
                    badge={tabbar.hasBadge}
                    data-seed={tabbar.title}
                  >
                    {this.props.tabbarRouter}
                  </TabBar.Item>
                );
              }
          )
        }
        </TabBar>
      </div>
    );
  }
}


export default connect(({
  global,
}) => ({
  carListNum: global.carListNum,
}))(TabBarPage);
